<template>
  <div class="awards">
    <div class="left item">
      <div class="title">
        <h4>{{ data.left_title }}</h4>
        <i>{{ data.vipTost.tips }}</i>
      </div>
      <ul>
        <li v-for="item in left" :key="item.id">
          <img :src="item.img_url" />
          <span>{{ item.price }}</span>
        </li>
      </ul>
    </div>
    <div class="right item">
      <div class="title">
        <h4>签到抽奖</h4>
        <i>{{ data.sign.level_appendtext }}</i>
      </div>
      <ul>
        <li v-for="item in right" :key="item.day">
          <span>第{{ item.day }}天</span>
          <img :src="item.image" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    left: {
      type: Array,
      default: () => [],
    },
    right: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.awards {
  display: flex;
  padding-right: 10px;
  .item {
    background: #fff;
    box-sizing: border-box;
    width: 50%;
    border-radius: 10px;
    margin-left: 10px;
    .title {
      display: flex;
      padding: 10px;
      align-items: center;
      h4 {
        color: #333;
        font-size: 14px;
        font-weight: 700;
      }
      i {
        padding: 0 3px;
        background: #ef8166;
        border-radius: 30px;
        font-size: 12px;
        color: #fff;
        transform: scale(0.7);
      }
    }
    ul {
      display: flex;
      padding-bottom: 10px;
      padding-right: 10px;
      li {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          margin-top: 5px;
          padding: 5px;
        }
      }
    }
  }
  .left {
    ul {
      li {
        img {
          width: 100%;
        }
        span {
          color: #333;
          font-size: 12px;
          margin-top: 5px;
          font-weight: 700;
        }
      }
    }
  }
  .right {
    padding: 0 10px 10px;
    ul {
      width: 100%;
      height: calc(100% - 42px);
      background: rgb(247, 247, 247);
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      li {
        border: 1px solid #ffb315;
        height: 100%;
        border-radius: 5px;
        background: #fff;
        color: #333;
        width: 30%;
        span {
          font-size: 12px;
          margin-top: 10%;
        }
        img {
          height: 18px;
          margin-top: 50%;
        }
      }
    }
  }
}
</style>